<template>
	<div>
		<el-row :gutter="24">
			<!--搜索条件/时间-->
			
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="brand" placeholder="请输入品牌名称" clearable @change="getCompanyInfo">
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="companyId" placeholder="请输入公司名称" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="queryPostData.startDate" size="small" style="width:90%;" type="date" clearable placeholder="起始日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">至:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="queryPostData.stopDate" size="small" style="width:90%;" type="date" clearable placeholder="结束日期">
				</el-date-picker>
			</el-col>
			
				<el-col :span="1" class="labelCol">
				<p class="labelText">维修类别:</p>
			</el-col>
			<el-col :span='4'>
				<el-select v-model="queryPostData.wxType" placeholder="维修类别" size="small" clearable>
					<el-option v-for="item in wxType" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-col>
			
			<!--搜索-->
			<el-col :span="2">
				<el-button @click="showChart" size="small" type="primary" style="float:right">查询</el-button>
			</el-col>
		</el-row>

		<el-tabs v-model="activeName" @tab-click="handleClick">
			<!--进厂产值标签页-->
			<el-tab-pane label="进厂产值" name="first">
				<el-row :gutter="24" style="margin-top: 50px;" v-loading="loading2" element-loading-text="拼命加载中">
					<el-col :span="24">
						<div id="chartsDiv">
							<div id="charts" style="width:1100px;height:350px;"></div>
						</div>
					</el-col>
				</el-row>
			</el-tab-pane>

			<!--进厂辆次标签页-->
			<el-tab-pane label="进厂辆次" name="second">
				<el-row :gutter="24" style="margin-top: 50px;" v-loading="loading" element-loading-text="拼命加载中">
					<el-col :span="24">
						<div id="chartsDiv2">
							<div id="charts2" style="width:1100px;height:350px;"></div>
						</div>
					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>

	</div>
</template>

<script>
	import echarts from 'echarts'
	import moment from 'moment'
	export default {
		data: function() {
			return {
				
				wxType: [{
					label: '首保',
					value: '首保'
				}, {
					label: '二保',
					value: '二保'
				}, {
					label: '定保',
					value: '定保'
				}, {
					label: '一般维修',
					value: '一般维修'
				}, {
					label: '事故车',
					value: '事故车'
				}, ],
				
				//查询条件
				area: '',
				brand: '',
				companyId: '',
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				loading2: false,
				loading: false,
				/*产值*/
				queryPostData: {
					startDate: "",
					stopDate: "",
					area: '',
					brand: '',
					companyId: '',
					wxType:'',// 工单类型
				},
				/*辆次*/
				queryPostData2: {
					start: "",
					stop: "",
					area: '',
					brand: '',
					companyId: '',
					wxType:'',// 工单类型
				},
				/*产值*/
				dataList: [], // 产值
				dateInterval: [], //时间段
				/*辆次*/
				dataList2: [], // 产值
				dateInterval2: [], //时间段

				myChart: null,
				myChart2: null,
				//标签页默认first
				activeName: "first",
			}
		},
		methods: {
			//切换标签页
			handleClick: function(tab, event) {
				//alert(tab.label);
			},
			//查询按钮调用
			showChart: function() {
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司！")
				} else {
					this.$data.loading2 = true; // 显示Loading
					this.$data.loading = true; // 显示Loading
					debugger;
					//alert("显示图表");
					this.queryChartsData();
					this.queryChartsData2();
				}

			},
			drawCharts: function() {
				this.$data.myChart = null;
				//获取图表对象
				this.$data.myChart = echarts.init(document.getElementById('charts'));

				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '进厂产值报表',
					},
					tooltip: {
						trigger: 'axis' // 鼠标指针跟随标签
					},
					legend: {
						data: ['增加产值']
					},
					xAxis: { // x轴 ： 时间
						type: 'category',
						boundaryGap: false,
						data: this.$data.dateInterval
					},
					yAxis: {},
					series: [{ // Y轴 ： 产值
						name: '增加产值',
						type: 'line',
						data: this.$data.dataList,
					}]
				};
				this.$data.myChart.setOption(option); // 配置图表数据

			},
			drawCharts2: function() {
				this.$data.myChart2 = null;
				//获取图表对象
				this.$data.myChart2 = echarts.init(document.getElementById('charts2'));

				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '进厂辆次报表',
					},
					tooltip: {
						trigger: 'axis' // 鼠标指针跟随标签
					},
					legend: {
						data: ['进厂辆次']
					},
					xAxis: { // x轴 ： 时间
						type: 'category',
						boundaryGap: false,
						data: this.$data.dateInterval2
					},
					yAxis: {},
					series: [{ // Y轴 ： 产值
						name: '进厂辆次',
						type: 'line',
						data: this.$data.dataList2,
					}]
				};
				this.$data.myChart2.setOption(option); // 配置图表数据

			},
			/*进厂产值查询*/
			queryChartsData: function() {
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司！")
				} else {
					this.$data.queryPostData.area = this.$data.area;
					this.$data.queryPostData.brand = this.$data.brand;
					this.$data.queryPostData.companyId = this.$data.companyId;
					this.$data.queryPostData.startDate = this.momentFu(this.$data.queryPostData.startDate);
					this.$data.queryPostData.stopDate = this.momentFu(this.$data.queryPostData.stopDate);
					this.$data.dataList = [];
					this.$data.dateInterval = [];
					this.$http.post(this.API_ROOT + "/crm/kpi/balaceAnalysis", this.$data.queryPostData)
						.then(resp => {
							//alert(resp.data.msg);
							if(resp.data.success) {
								for(var i = 0; i < resp.data.dataList.length; i++) {
									this.$data.dataList[i] = resp.data.dataList[i].valus;
									this.$data.dateInterval[i] = resp.data.dataList[i].key;
								}
								this.drawCharts();
								this.$data.loading2 = false; //隐藏Loading
							}
						});
					debugger;
				}

			},

			/*进厂辆次查询*/
			queryChartsData2: function() {
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司！")
				} else {
					this.$data.queryPostData2.area = this.$data.area;
					this.$data.queryPostData2.brand = this.$data.brand;
					this.$data.queryPostData2.companyId = this.$data.companyId;
					this.$data.queryPostData2.start = this.momentFu(this.$data.queryPostData.startDate);
					this.$data.queryPostData2.stop = this.momentFu(this.$data.queryPostData.stopDate);
					this.$data.queryPostData2.wxType = this.$data.queryPostData.wxType;
					this.$data.dataList2 = [];
					this.$data.dateInterval2 = [];
					this.$http.post(this.API_ROOT + "/crm/kpi/enterVehicleNum", this.$data.queryPostData2)
						.then(resp => {
							//alert(resp.data.msg);
							if(resp.data.success) {
								for(var i = 0; i < resp.data.dataList.length; i++) {
									this.$data.dataList2[i] = resp.data.dataList[i].number;
									this.$data.dateInterval2[i] = resp.data.dataList[i].date;
								}
								this.drawCharts2();
								this.$data.loading = false; //隐藏Loading
							}
						});
					debugger;
				}

			},
			//时间格式化
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM-DD");
				}
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
						brand: this.$data.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {

					}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/brand/all", {
					params: {}
				}).then(resp => {
					this.$data.brandCombo = resp.data.dataList;
				});
			},

		},
		created: function() {
			//			this.queryChartsData2();
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();
		},
		components: {

		}
	}
</script>

<style>

</style>